.alert {
  padding: $space-x2;
  border-radius: $space-x1;
  font-size: 13px;
  line-height: 16px;

  @each $name, $color in $theme-colors {
    &.#{$name} {
      background-color: lighten($color, 43%);
      color: $gray-800;
      svg {
        color: $color;
      }
    }
  }

  &.success {
    background-color: lighten($success, 67%);
  }

  &.primary {
    background-color: lighten($primary, 35%);
  }

  &.purple {
    background-color: lighten($purple, 49%);
  }
}


.feedback-icon {
  margin-right: $space-x2;
  flex-shrink: 0;
}
